<!-- Licensed under a BSD license. See license.html for license -->
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
  <title>WebGL - light cube</title>
  <link type="text/css" href="resources/webgl-tutorials.css" rel="stylesheet" />
</head>

<body>
  <div class="description">
    test cube
  </div>
  <canvas id="canvas"></canvas>
  <div id="uiContainer">
    <div id="ui">
      <div id="x"></div>
      <div id="y"></div>
      <div id="angle"></div>
      <div id="scaleX"></div>
      <div id="scaleY"></div>
    </div>
  </div>
</body>
<!-- vertex shader -->
<script id="vertex-shader-2d" type="x-shader/x-vertex">
attribute vec4 a_position;
attribute vec4 a_color;
attribute vec4 a_norm;
uniform vec4 u_lighColor;
uniform vec4 u_lighDirect;
uniform vec4 u_lighPos;
uniform vec4 u_amibLigh;
uniform mat4 u_normMat;
uniform mat4 u_modelMat;

uniform mat4 u_mvpmat;
varying vec4 v_color;
void main() {
  gl_Position = u_mvpmat * a_position;
  vec4 vertPos = gl_Position;

  vec3 norm = normalize(vec3(a_norm));
  vec3 lightDirect = vec3(u_lighDirect);
  lightDirect = normalize(vec3(u_mvpmat * u_lighPos) - vec3(vertPos));
  float dotL = dot(norm,vec3(lightDirect));
  vec3 diffuse = vec3(u_lighColor) * vec3(a_color) * dotL;
  vec3 amb = vec3(u_amibLigh) * a_color.rgb;
  v_color = vec4(diffuse+amb, a_color.a);
}
</script>
<!-- fragment shader v_color+vec4(v_texCoor,0.5,0.5); -->
<script id="fragment-shader-2d" type="x-shader/x-fragment">
precision mediump float;
varying vec4 v_color;
void main() {
  gl_FragColor = v_color;

}
</script>
<!--
for most samples webgl-utils only provides shader compiling/linking and
canvas resizing because why clutter the examples with code that's the same in every sample.
See https://webglfundamentals.org/webgl/lessons/webgl-boilerplate.html
and https://webglfundamentals.org/webgl/lessons/webgl-resizing-the-canvas.html
for webgl-utils, m3, m4, and webgl-lessons-ui.
-->
<script src="resources/webgl-utils.js"></script>
<script src="resources/webgl-lessons-ui.js"></script>
<script src="resources/m3.js"></script>
<script src="resources/m4.js"></script>
<script>
  "use strict";
  // function setNormals(gl) {
  var normals = new Float32Array([
    1.0, 0.0, 0.0, 1.0,
    1.0, 0.0, 0.0,  1.0,
    1.0, 0.0, 0.0,  1.0,
    1.0, 0.0, 0.0,   1.0,// v0-v1-v2-v3 front
    0.0, 0.0, 1.0, 1.0, 
    0.0, 0.0, 1.0,  1.0,
    0.0, 0.0, 1.0,  1.0,
    0.0, 0.0, 1.0,  1.0 // v0-v3-v4-v5 right
  ]);
  //   gl.bufferData(gl.ARRAY_BUFFER, normals, gl.STATIC_DRAW);
  // }
  function main() {
    // Get A WebGL context
    /** @type {HTMLCanvasElement} */
    var canvas = document.querySelector("#canvas");
    var gl = canvas.getContext("webgl");
    if (!gl) {
      return;
    }

    // setup GLSL program
    var program = webglUtils.createProgramFromScripts(gl, ["vertex-shader-2d", "fragment-shader-2d"]);

    webglUtils.resizeCanvasToDisplaySize(gl.canvas);

    // Tell WebGL how to convert from clip space to pixels
    gl.viewport(0, 0, gl.canvas.width, gl.canvas.height);

    // Clear the canvas.
    gl.clear(gl.COLOR_BUFFER_BIT);

    // Tell it to use our program (pair of shaders)
    gl.useProgram(program);

    let data1 = new Float32Array([
      1, 1, 1, 1,
      -1, 1, 1, 1,
      -1, -1, 1, 1,
      1, -1, 1, 1,
      1, -1, -1, 1,
      1, 1, -1, 1,
      -1, 1, -1, 1,
      -1, -1, -1, 1
    ]);
    let data2 = new Float32Array([
      1, 0, 0, 1,
      1, 0, 0, 1,
      1, 0, 0, 1,
      1, 0, 0, 1,
      1, 0, 0, 1,
      1, 0, 0, 1,
      1, 0, 0, 1,
      1, 0, 0, 1]);
    // let data3 = new Float32Array([
    //   0, 1,
    //   0, 0,
    //   1, 1,
    //   1, 0]);
    var positionAttributeLocation = gl.getAttribLocation(program, "a_position");
    var positionBuffer = gl.createBuffer();
    gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
    gl.bufferData(
      gl.ARRAY_BUFFER,
      data1,
      gl.STATIC_DRAW);
    gl.enableVertexAttribArray(positionAttributeLocation);
    gl.vertexAttribPointer(
      positionAttributeLocation, 4, gl.FLOAT, false, 0, 0);

    var colorAttr = gl.getAttribLocation(program, "a_color");
    var colorBuffer = gl.createBuffer();
    gl.bindBuffer(gl.ARRAY_BUFFER, colorBuffer);
    gl.bufferData(
      gl.ARRAY_BUFFER,
      data2,
      gl.STATIC_DRAW);
    gl.enableVertexAttribArray(colorAttr);
    gl.vertexAttribPointer(
      colorAttr, 4, gl.FLOAT, false, 0, 0);


    var normAttr = gl.getAttribLocation(program, "a_norm");
    var normBuffer = gl.createBuffer();
    gl.bindBuffer(gl.ARRAY_BUFFER, normBuffer);
    gl.bufferData(
      gl.ARRAY_BUFFER,
      normals,
      gl.STATIC_DRAW);
    gl.enableVertexAttribArray(normAttr);
    gl.vertexAttribPointer(
      normAttr, 4, gl.FLOAT, false, 0, 0);


    var indices = new Uint8Array([
      0, 1, 2, 0, 2, 3,
      0, 3, 4, 0, 4, 5,
      0, 5, 6, 0, 6, 1,
      1, 6, 7, 1, 7, 2,
      7, 4, 3, 7, 3, 2,
      4, 7, 6, 4, 6, 5]);
    var indicesBuffer = gl.createBuffer();
    gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, indicesBuffer);
    gl.bufferData(
      gl.ELEMENT_ARRAY_BUFFER,
      indices,
      gl.STATIC_DRAW);





    var u_lighColor = gl.getUniformLocation(program, "u_lighColor");
    gl.uniform4f(u_lighColor, 1.0, 1.0, 1.0,1.0);

    var u_lighDirect = gl.getUniformLocation(program, "u_lighDirect");
    gl.uniform4f(u_lighDirect, 0.0, 0.0, 1.0,1.0);

    var u_lighPos = gl.getUniformLocation(program, "u_lighPos");
    gl.uniform4f(u_lighPos, 0.0, 0.0, 0.0,1.0);

    var u_amibLigh = gl.getUniformLocation(program, "u_amibLigh");
    gl.uniform4f(u_amibLigh, 0.2, 0.2, 0.2,1.0);

    var u_normMat = gl.getUniformLocation(program, "u_normMat");
    var norMat = m4.yRotate(90);
    norMat = m4.inverse(norMat);
    norMat = m4.transpose(norMat)
    gl.uniformMatrix4fv(u_normMat, false, norMat)

    var u_modelMat = gl.getUniformLocation(program, "u_modelMat");
    var modMat = m4.translation(0,0,0);
    // modMat = m4.inverse(modMat);
    // modMat = m4.transpose(modMat)
    gl.uniformMatrix4fv(u_modelMat, false, modMat)


    var matrixLocat = gl.getUniformLocation(program, "u_mvpmat");
    var projM = m4.perspective((Math.PI * 0 / 180), 1, 1, 100);

    projM = m4.lookAt(new Float32Array([1 - 0.5, -1 + 0.5, -1 + 0.5]), new Float32Array([0, 0, 0]), new Float32Array([0, 1, 0]), projM);

    // projM = m4.translate(projM, 0.2, 0.2, 0.2);
    projM = m4.scale(projM, 0.2, 0.2, 0.2);
    // projM = m4.zRotate(projM, 0);

    gl.uniformMatrix4fv(matrixLocat, false, projM);

    var tim = Date.now();
    var tim2 = tim;
    var getAngle = function () {
      var cur = Date.now();
      var delta = cur - tim;
      tim = cur;
      return (0.8 * delta / 1000) % 3;
    }
    var rotDis = 0;
    var delt = 0.1;
    var rotate = function () {
      // modMat = m4.xRotate(getAngle(),modMat);
    // modMat = m4.inverse(modMat);
    // modMat = m4.transpose(modMat)
    // gl.uniformMatrix4fv(u_modelMat, false, modMat)
    if (rotDis > 8){
      delt = -0.1; 
    }else if(rotDis < -8){
      delt = 0.1; 
    }
    rotDis += delt;
    gl.uniform4f(u_lighPos, 0.0, 0.0, rotDis,1.0);
      projM = m4.zRotate(projM, getAngle());
      gl.uniformMatrix4fv(matrixLocat, false, projM);
    }

    // Draw the scene.
    function drawScene() {
      var primitiveType = gl.TRIANGLES;
      var offset = 0;
      var count = 36;
      gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT)
      gl.enable(gl.DEPTH_TEST)
      gl.drawElements(primitiveType, count, gl.UNSIGNED_BYTE, offset);
    }
    function func() {
      rotate();
      drawScene();
      requestAnimationFrame(func);
    }

    func();
  }

  main();
</script>

</html>